<template>
  <div class="fans-article">
    <van-nav-bar fixed border title="我的粉丝" left-text="返回" @click-left="$router.go(-1)" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" @click="onClick" animated swipeable title-active-color="pink" line-height="2px" color="pink">
      <van-tab v-for="(item,index) in tabs" :key="index">
        <template #title>
          {{ item.name }}
        </template>
        <fans-list :active="Actives" :autorname="name"></fans-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import FansList from './components/fans-list'
export default {
  name: 'Fans',
  components: {
    FansList
  },
  props: {},
  data () {
    return {
      active: 0,
      tabs: [{
        name: '粉丝',
        icon: 'like'
      },
      {
        name: '关注',
        icon: 'star'
      }],
      name: this.$route.params.user
    }
  },
  computed: {
    // 用来区分本人和其他作者的主页
    Actives () {
      if (this.name === 'my') {
        return this.active
      } else {
        return this.active + 2
      }
    }
  },
  created () {
    this.active = parseInt(this.$route.params.active)
  },
  methods: {
    onClick () {

    }
  }
}
</script>

<style scoped lang="less">
  .van-tabs {
    position: absolute;
    top: 80px;
    width:100%;
  }
  .van-nav-bar{
    border-bottom:1px solid #808080;
    box-shadow:1px 1px 3px 3px #e3e3e3
  }
</style>
